import React,{useState} from 'react';
import {
    View,
    StyleSheet,
    Image,
    Text,
    Linking,
    TouchableOpacity,
    TextInput,
    LayoutAnimation
} from 'react-native'; 
import icon_logo_main from '../../assets/icon_main_logo.png';
import icon_unselect  from '../../assets/icon_unselected.png';
import icon_selected  from '../../assets/icon_selected.png';
import  icon_arrow  from '../../assets/icon_arrow.png';
import icon_wx_small  from '../../assets/icon_wx_small.png';
import icon_trangle from '../../assets/icon_triangle.png';
import  icon_eye_close  from '../../assets/icon_eye_close.png';
import  icon_eye_open  from  '../../assets/icon_eye_open.png';
import  icon_exchange from '../../assets/icon_exchange.png';
import icon_wx from '../../assets/icon_wx.png';
import icon_qq from '../../assets/icon_qq.webp';
import icon_close_modal from '../../assets/icon_close_modal.png';
import {useNavigation} from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import {formatPhone} from '../../utils/StringUtil';
export  default ()=>{
    const [LoginType, setLoginType] = useState<"quick"|'input'>('quick')
    const [check, setCheck] =useState<boolean>(false);
    const [pwdshow ,setPwdShow]= useState<boolean>(false);
    const navgiation = useNavigation<StackNavigationProp<any>>();
    const [phone, setPhone] = useState<string>('');
    const [pwdValue, setpwdValue] = useState<string>('');
    const renderQuickLogin = () => {
        const styles = StyleSheet.create({
            root: {
                width: '100%',
                height: '100%',
                flexDirection: 'column-reverse',
                alignItems: 'center',
                paddingHorizontal: 56
            },
            protocLayout: {
                width: '100%',
                flexDirection: 'row',
                alignItems: 'center',
                marginBottom: 40,
                marginTop: 12,
            },
            radiobutton:{
                width: 20,
                height: 20
            },
            label:{
                fontSize: 12,
                color: '#999',
                marginLeft: 6
            },
            protoTxt:{
                fontSize: 12,
                color: '#1020ff'
            },
            otherLogin:{
                flexDirection: 'row',
                alignItems:'center',
                paddingVertical: 20,
                paddingHorizontal: 10,
                marginBottom: 100
            },
            otherTxt:{
                fontSize: 16,
                color: '#303080'      
            },
            otherImg:{
                width: 16,
                height: 16,
                resizeMode: 'contain',
                marginLeft: 6,
                transform: [{rotate: '180deg'}]
            },
           
            wxLoginButton: {
                width: '100%',
                height: 56,
                backgroundColor: '#05c160',
                borderRadius: 28,
                justifyContent: 'center',
                alignItems: 'center',
                flexDirection: 'row',
            },
            wx_img:{
                width: 40,
                height: 40,
            },
            wx_txt:{
                fontSize: 18,
                color: 'white',
                marginLeft: 6
            },
            onekeybutton:{
                width: '100%',
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'center',
                height: 56,
                borderRadius: 28,
                backgroundColor: '#ff2442',
                marginBottom: 20
        
            },
            onkeyTxt:{
                fontSize: 18,
                color: 'white',
                marginLeft: 6
            },
            mainlog:{
                width: 180,
                height: 95,
                resizeMode: 'contain',
                position: 'absolute',
                top: 170

            } 
        });
        return (
            <View style={styles.root}>
                <View style={styles.protocLayout}>
                    <TouchableOpacity onPress={()=>{
                        setCheck(!check);
                    }}>
                    <Image style={styles.radiobutton} source={check? icon_selected:icon_unselect}></Image>
                    </TouchableOpacity>
                    <Text style={styles.label}>我已阅读并同意</Text>
                    <TouchableOpacity onPress={()=>{
                        Linking.openURL("https://baidu.com")
                    }}>
                    <Text style={styles.protoTxt}> 《用户协议》和《隐私政策》</Text>
                    </TouchableOpacity>
                </View>

                <TouchableOpacity style={styles.otherLogin} onPress={()=>{
                    LayoutAnimation.easeInEaseOut();
                        setLoginType('input');
                }}>
                    <Text style={styles.otherTxt}>其它登录方式</Text>
                    <Image style={styles.otherImg} source={icon_arrow} />
                </TouchableOpacity>

                <TouchableOpacity style={styles.wxLoginButton}>
                    <Image style={styles.wx_img} source={icon_wx_small} />
                    <Text style={styles.wx_txt}>微信登录</Text>
                </TouchableOpacity>

                <TouchableOpacity style={styles.onekeybutton}>
                    <Text style={styles.onkeyTxt}>一键登录</Text>
                </TouchableOpacity>

                <Image style={styles.mainlog} source={icon_logo_main} /> 
                
            </View>
        );
    }

    const renderInputLogin = () => {
        const styles = StyleSheet.create({
            root: {
                flexDirection: 'column',
                width: '100%',
                height: '100%',
                backgroundColor: 'white',
                alignItems:'center',
                paddingHorizontal: 56,
            },
            mainTxt:{
                fontSize: 28,
                color: '#333',
                fontWeight: 'bold',
                marginTop: 56
            },
            tip: {
                fontSize: 14,
                color: '#999',
                marginTop: 6
            },
            phoneLayout:{
                width: '100%',
                flexDirection: 'row',
                alignItems: 'center',
                height: 60,
                borderBottomWidth: 1,
                borderBottomColor: '#ddd',
                marginTop: 28
            },
            txtp:{
                fontSize: 24,
                color: '#bbb'
            },
            trangle:{
                marginLeft:6,
                width: 12,
                height: 6
            },
            phoneInput:{
                flex: 1,
                textAlign: 'left',
                backgroundColor: 'transparent',
                height: 60,
                textAlignVertical: 'center',
                fontSize: 24,
                color: '#333',
                marginLeft: 16

            },
            pwdLayout:{
                width: '100%',
                flexDirection: 'row',
                alignItems: 'center',
                height: 60,
                borderBottomWidth: 1,
                borderBottomColor: '#ddd',
                marginTop: 6

            },
            pwdInput:{
                flex: 1,
                fontSize: 18,
                backgroundColor: 'transparent'   
            },
            pwdeye:{
                marginLeft: 6,
                width: 30,
                height: 30
            },
            verifyLayout:{
                flexDirection: 'row',
                width: '100%',
                marginTop: 12
            },
            exchange:{
                width: 20,
                height: 20
            },
            verifyTxt: {
                fontSize: 14,
                flex: 1,
                color: '#303080',
                marginLeft: 4
            },
            forgetpwd:{
               fontSize: 14,
               color: '#303080',
               marginLeft: 4
            },
            logindisable:{
                width: '100%',
                height: 56,
                backgroundColor: '#DDDDDD',
                marginTop:  20,
                borderRadius: 28,
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'center'
            },
            login:{
                width: '100%',
                height: 56,
                backgroundColor: '#ff2442',
                marginTop:  20,
                borderRadius: 28,
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'center'
            },
            loginTxt:{
                fontSize: 20,
                color: 'white'
            },
            protocLayout: {
                width: '100%',
                flexDirection: 'row',
                alignItems: 'center',
                marginTop: 12,
            },
            radiobutton:{
                width: 20,
                height: 20
            },
            label:{
                fontSize: 12,
                color: '#999',
                marginLeft: 6
            },
            protoTxt:{
                fontSize: 12,
                color: '#1020ff'
            },
            wxqqLayout: {
                width: '100%',
                flexDirection: 'row',
                justifyContent: 'center',
                marginTop: 70
            },
            wx:{
                width: 56,
                height: 56,
                marginRight: 60
            },
            qq:{
                width: 56,
                height: 56,
                marginLeft: 60
            },
            closeButton: {
                position: 'absolute',
                left: 36,
                top: 24
            },
            close:{
                width: 28,
                height: 28
            }

        });
        const canLogin = phone?.length ===  13 && pwdValue?.length === 6
        return (
            <View style={styles.root}>
                <Text style={styles.mainTxt}>密码登录</Text>
                <Text style={styles.tip}>未注册的手机号登录后将自动注册</Text>
                <View style={styles.phoneLayout}>
                    <Text style={styles.txtp}>+86</Text>
                    <Image style={ styles.trangle}source={icon_trangle}></Image>
                    <TextInput 
                        style={styles.phoneInput} 
                        placeholder='请输入手机号码'  
                        placeholderTextColor='#bbb'
                        keyboardType='number-pad'
                        maxLength={13} 
                        value={phone}
                        onChangeText={(text:string)=>{
                            setPhone(formatPhone(text));
                        }}
                        />
                </View>
                <View style={styles.pwdLayout}>
                    <TextInput 
                        style={styles.pwdInput} 
                        placeholder='输入密码'  
                        placeholderTextColor='#bbb' 
                        autoFocus={false}
                        keyboardType='number-pad'
                        secureTextEntry={!pwdshow}
                        value={pwdValue} 
                        onChangeText={(text)=>{
                            setpwdValue(text);
                        }}
                        maxLength={8}/>
                    <TouchableOpacity onPress={()=>{
                            setPwdShow(!pwdshow);
                    }}>
                        <Image style={ styles.pwdeye}source={pwdshow?icon_eye_open: icon_eye_close}></Image>
                    </TouchableOpacity>
                </View>
                <View style={styles.verifyLayout}>
                    <Image style={styles.exchange} source={icon_exchange} /> 
                    <Text style={styles.verifyTxt}>验证码登录</Text>
                    <Text style={styles.forgetpwd}>忘记密码?</Text>               
                </View>

                <TouchableOpacity style={canLogin?styles.login:styles.logindisable}  activeOpacity={canLogin?0.7:1} onPress={()=>{
                        if (!canLogin){
                            return
                        }
                        navgiation.replace('MainTab');
                        //跳转
                }}>
                    <Text style={styles.loginTxt}>登录</Text>
                </TouchableOpacity>
                <View style={styles.protocLayout}>
                    <TouchableOpacity onPress={()=>{
                        setCheck(!check);
                    }}>
                    <Image style={styles.radiobutton} source={check? icon_selected:icon_unselect}></Image>
                    </TouchableOpacity>
                    <Text style={styles.label}>我已阅读并同意</Text>
                    <TouchableOpacity onPress={()=>{
                        Linking.openURL("https://baidu.com")
                    }}>
                    <Text style={styles.protoTxt}> 《用户协议》和《隐私政策》</Text>
                    </TouchableOpacity>

                </View>

                <View  style={styles.wxqqLayout}>
                    <Image style={styles.wx} source={icon_wx} />
                    <Image style={styles.qq} source={icon_qq} />
                </View>
                <TouchableOpacity style={styles.closeButton} onPress={()=>{
                    LayoutAnimation.spring();
                    setLoginType('quick');
                    
                }}>
                    <Image style={styles.close} source={icon_close_modal} />
                </TouchableOpacity>
            </View>
        );
    }
    return(
        <View>
            {
                LoginType === 'quick' ?
                renderQuickLogin() : renderInputLogin()
            }
        </View>
    );
}
// const allStyles = StyleSheet.create({
//     root: {
//         width: '100%',
//         height: '100%',
//         backgroundColor: 'white',
//         flexDirection: 'column',
//         alignItems: 'center',
//     }
// })
